<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带有对话框界面</title>
    <!-- 引入手机移动端库 -->
    <link rel="stylesheet" href="../lib/jquery.mobile-1.4.5.min.css">
    <script src="../lib/jquery-1.11.3.min.js"></script>
    <script src="../lib/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="pageone">
        <!-- 手机标题 -->
        <div data-role="header">
            <h1>第一页标题</h1>
        </div>
        <!-- 手机内容 -->
        <div data-role="content">
            <p>第一页内容</p>
            <!-- 增加一个链接 跳转到第二页 -->
            <a href="#pagetwo">欢迎字幕</a>
        </div>
        <!-- 手机底部 -->
        <div data-role="footer">
            <h1>第一页底部</h1>
        </div>
    </div>
    <!-- 以下这个页面，要按对话框方式制作 -->
    <div data-role="page" id="pagetwo" data-dialog="true">
        <!-- 手机标题 -->
        <div data-role="header">
            <h1>欢迎！</h1>
        </div>
        <!-- 手机内容 -->
        <div data-role="content">
            <p>你好，欢迎来到第二页</p>
            <!-- 返回第一页 -->
            <a href="#pageone">返回</a>
        </div>
        <!-- 手机底部 -->
        <div data-role="footer">
            <h1>第二页底部</h1>
        </div>
    </div>
</body>
</html>